<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增【请填写功能名称】')"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-district-add">
        <div class="form-group">
            <label class="col-sm-3 control-label">国家：</label>
            <div class="col-sm-8">
                <select id="country" class="form-control m-b" name="countryId">
                    <option value="">--请选择国家--</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">省份：</label>
            <div class="col-sm-8">
                <!--<input name="cityId" class="form-control" type="text">-->
                <select id="city" class="form-control m-b" name="cityId">
                    <option value="">--请选择省份--</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">城市名称：</label>
            <div class="col-sm-8">
                <input name="district" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">排序：</label>
            <div class="col-sm-8">
                <input name="initial" class="form-control" type="text">
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<script type="text/javascript">
    //页面一加载调取后台查询全部国家的方法
    $.ajax({
        url: ctx + "app/country/appList",
        type: "post",
        dataType: "json",
        success: function (data) {
            console.log(data)
            $(data.data).each(function (a, b) {
                var countryId = b.id;
                $("#country").append("<option value='" + countryId + "'>" + b.country + "</option>");
            });
        },
        error: function () {
        }
    });

    //选择国家,通过国家获取省份信息
    $("#country").change(function () {
        var areaid = $("#country").val();
        $.ajax({
            url: ctx + "app/city/countryCity",
            type: "post",
            dataType: "json",
            data: {
                "countryId": areaid
            },
            success: function (data) {
               /* console.log(data.data)*/
                if (data.data != "") {
                    var len = data.data.length
                    for (var i = 0; i < len; i++) {
                        console.log(data.data[i])
                        $("#city").append("<option value='" + data.data[i].id + "'>" + data.data[i].city + "</option>");
                    }
                } else {
                    $("#city").html("<option value=''>" + '--请选择省份--' + "</option>");
                }
            },
            error: function () {
            }
        });
    });


    var prefix = ctx + "app/district"
    $("#form-district-add").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/add", $('#form-district-add').serialize());
        }
    }
</script>
</body>
</html>